import * as React from 'react';
import classnames from 'classnames'
import './styles.less';
import { Icon } from "office-ui-fabric-react";

interface Props {
  onClick?(event: any): any
  onSwitch?(): any
  type?: string
  active?: boolean
  isOpen?: boolean // 是否展开
  title?: string
  content?: any
  children?: any
}
interface IState {
  hideTrigger?: boolean
}

class Paragraph extends React.Component<Props, IState>{
  $dom: Element
  constructor(props: Props) {
    super(props);
    this.state = {
      hideTrigger: false,
    };
  }

  componentDidMount() {

    let contentHeight = this.$dom.scrollHeight
    if (contentHeight < 100) {
      // 高度太小的时候就不启用展开收起功能
      this.setState({
        hideTrigger: true
      })
    }
  }

  ref = (ref) => {
    this.$dom = ref
  }
  render() {
    const { onClick, onSwitch, isOpen = true, type, title, active, content, children } = this.props
    const { hideTrigger } = this.state
    const trigger = (e) => {
      e.stopPropagation();
      onSwitch && onSwitch()
    }

    let hasMove;
    const handleMouseMove = () => {
      hasMove = true;   //元素移动事件中跟新标识为true，表示有发生移动
    }
    const handleMouseDown = () => {
      hasMove = false;
    }
    const handleMouseUp = (e) => {
      if (hasMove) {
        console.log("移动后鼠标松开事件");
      } else {
        console.log("没有移动鼠标松开事件,模拟click");
        onClick(e)
      }
      hasMove = false;  //还原标识，以便下一次使用
    }

    return (
      <div
        // onClick={onClick}
        onMouseMove={handleMouseMove}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        className="paragraph-view"
      >

        <div className={`paragraph hover-card ${active ? 'paragraph-active' : 'paragraph-disabled'}`}>
          {
            type !== '3' ? (
              <h2 className="paragraph-title">{title}</h2>
            ) : ''
          }
          <div
            ref={(ref) => {
              this.$dom = ref
            }}
            className={classnames('paragraph-content', { 'overflow': hideTrigger ? false : !isOpen })}
            dangerouslySetInnerHTML={{ '__html': content || children }}
          />
          {
            !hideTrigger && (
              <div className={classnames('open-icon', { 'open': isOpen })} >
                <Icon onMouseUp={trigger} iconName="ChevronDownMed" className="icon" />
              </div>
            )
          }
        </div>
      </div>
    )
  }
}

export default Paragraph
